<template>
  <div class="app">
    <!-- 面包屑导航区域 开始 -->
    <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>热搜热词管理</el-breadcrumb-item>
      <el-breadcrumb-item>查看搜索热词</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 面包屑导航区域 结束-->
    <div v-loading.fullscreen.lock="fullscreenLoading" 
      class="condion">
      <el-date-picker
        @change="changeTime"
        class="dataTime"
        v-model="value2"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
      >
      </el-date-picker>
    </div>
    <div>
      <div style="width:100%;height:500px" id="main"></div>
    </div>
  </div>
</template>
<script>
import { queryHotwords } from '@/network/searchHistoryManager'
import { timeStampFormatStr } from '@/util/dataTimeUtil'
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      value2: [new Date(new Date() - 1000 * 60 * 60 * 24 * 7), new Date()],

      myChart: null,
      fullscreenLoading: false,
      hotWordsList:[]
    }
  },
  methods: {
    // 时间发生改变
    changeTime() {
      console.info(this.value2)

      this.queryHotwords()
    },
    timeStampFormatStr,
    // 查询热词统计
    async queryHotwords() {
      this.fullscreenLoading = true
      if (this.value2 == null) {
        this.value2 = [
          new Date(new Date() - 1000 * 60 * 60 * 24 * 7),
          new Date()
        ]
      }
      let res = await queryHotwords({
        startTime: this.timeStampFormatStr(this.value2[0].getTime()),
        endTime: this.timeStampFormatStr(this.value2[1].getTime())
      })
      let { list } = JSON.parse(res.resp_data)
      this.hotWordsList=list
      // 循环处理返回一个新的数组
      let newList = list.map(item => {
        return {
          name: item._id,
          value: item.num
        }
      })
      // 刷新图表
      this.refreshData(newList)
      this.fullscreenLoading = false
    },
    refreshData(newList) {
      //刷新数据
      var option = this.myChart.getOption()
      console.info(option)
      option.series[0].data = newList
      let newLegend = option.legend
      newLegend.data = this.HotWords
      option.legend = newLegend
       option.title[0].text='box小说热词数据'
       console.info(newList.length)
      if(newList.length<1){
        option.title[0].text='暂无数据'
      }
      this.myChart.setOption(option)
    }
  },
  mounted() {
    console.info(this.value2[0])

    console.info(this.value2)
    this.queryHotwords()
    // 基于准备好的dom，初始化echarts实例
    this.myChart = this.$echarts.init(document.getElementById('main'))
    // 绘制图表
    this.myChart.setOption({
      title: {
        text: 'box小说热词数据',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '搜索热词',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    })
  }
}
</script>
<style lang="less" scoped>
.dataTime {
  float: right;
  position: relative;
}
.dataTime::after {
  content: '';
  display: inline-block;
  clear: both;
}
.dataTime::before {
  content: '时间范围:';
  width: 100px;
  position: absolute;
  left: -100px;
  font-size: 20px;
}
.condion {
  height: 40px;
}
.condion::after {
  content: '';
  display: inline-block;
  clear: both;
}
</style>
